<template>
	<view class="user_page">
		<view class="user_head">
			<view class="user_bg">
				<view class="user_infr_box">
					<view class="user_img_head">
						<view class="user_img"></view>
						<view class="user_deils">
							<text class="user_text">用户名</text>
							<view class="user_ID"><text>ID:1524521552</text></view>
						</view>
					</view>
					<uni-icons type="arrowright" color="#ffffff"></uni-icons>
				</view>
				<view class="user_fun">
					<view class="fun_box">
						<text class="user_text">10</text>
						<view class="user_fun_name"><text>商品收藏</text></view>
					</view>
					<view class="fun_box">
						<text class="user_text">10</text>
						<view class="user_fun_name"><text>店铺关注</text></view>
					</view>
					<view class="fun_box">
						<text class="user_text">10</text>
						<view class="user_fun_name"><text>浏览记录</text></view>
					</view>
				</view>
				<view class="user_order public_sty">
					<view class="order_all">
						<view class=""><text style="color: #000000; font-weight: 500;">我的订单</text></view>
						<view class="">
							<text style="color: #999999;font-size: 26rpx;">全部</text>
							<uni-icons type="arrowright" color="#999999"></uni-icons>
						</view>
					</view>
					<view class="order_status">
						<view class="order_ststus_box" v-for="(item, index) in orderStatus" :key="index">
							<uni-badge v-show="item.badge !== 0" :text="item.badge" type="error" size="small" absolute="leftBottom"></uni-badge>
							<uni-icons type="image" size="22"></uni-icons>
							<view class="cont_sty">
								<text>{{ item.text }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="user_con">
			<!-- 站位盒子 -->
			<view class="seize_box"></view>
			<view class="user_banner public_sty">
				<swiper :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
					<swiper-item v-for="(item, index) in mybannerlist" :key="index">
						<view class="swiper-item">{{ item.text }}</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="user_cont public_sty">
				<view class="user_cont_box" v-for="(item,index) in userCont">
					<uni-icons type="image" size="22"></uni-icons>
					<view class="cont_sty">
						<text>{{item.context}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			orderStatus: [
				{
					status: 2,
					text: '待付款',
					icon: '',
					badge: 0
				},
				{
					status: 2,
					text: '待自提',
					icon: '',
					badge: 0
				},
				{
					status: 2,
					text: '待付款',
					icon: '',
					badge: 1
				},
				{
					status: 2,
					text: '待收货',
					icon: '',
					badge: 1
				},
				{
					status: 2,
					text: '退款/售后',
					icon: '',
					badge: 1
				}
			],
			mybannerlist: [
				{
					text: 'A'
				},
				{
					text: 'B'
				},
				{
					text: 'C'
				}
			],
			userCont:[
				{
					id:0,
					context:'优惠券',
					icon:'',
				},
				{
					id:1,
					context:'我的处方',
					icon:'',
				},
				{
					id:2,
					context:'我的问诊',
					icon:'',
				},
				{
					id:3,
					context:'发票夹',
					icon:'',
				},
				{
					id:4,
					context:'用药提醒',
					icon:'',
				},
				{
					id:5,
					context:'关于我们',
					icon:'',
				},
				{
					id:0,
					context:'',
					icon:'',
				},
				{
					id:0,
					context:'',
					icon:'',
				},
			]
		};
	}
};
</script>

<style lang="scss" scoped>
.user_head {
	.user_bg {
		border: 2rpx solid;
		height: 400rpx;
		background-color: #00b359;
		color: #ffffff;
		padding: 30rpx;
		position: relative;
	}
	.user_infr_box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		.user_img_head {
			display: flex;
			align-items: center;
			.user_img {
				width: 130rpx;
				height: 130rpx;
				border: 2rpx solid;
				border-radius: 50%;
				overflow: hidden;
			}
			.user_deils {
				margin-left: 30rpx;
				.user_ID {
					margin-top: 20rpx;
					font-size: 26rpx;
				}
			}
		}
	}
	.user_fun {
		display: flex;
		justify-content: space-around;
		margin-top: 40rpx;
		.fun_box {
			text-align: center;
		}
		.user_fun_name {
			font-size: 26rpx;
		}
	}
}
.user_text {
	font-size: 36rpx;
}
.user_order {
	height: 176rpx;
	position: absolute;
	width: 84%;
	bottom: -15%;
	padding: 30rpx 32rpx;
	color: #323233;
	.order_all {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 40rpx;
	}
	.order_status {
		display: flex;
		justify-content: space-between;
	}
	.order_ststus_box {
		text-align: center;
		/deep/ .uni-badge--error {
			background-color: #ff5f42;
		}
		/deep/ .uni-badge {
			left: 24rpx !important;
			bottom: 12rpx !important;
		}
	}
}
.user_con {
	padding: 0rpx 30rpx;
	.user_banner {
		height: 200rpx;
		margin: 24rpx 0rpx;
	}
}
.seize_box {
	height: 70rpx;
}
.user_cont{
	padding:10rpx 30rpx;
	display: flex;
	flex-wrap: wrap;
	.user_cont_box{
		width: 25%;
		text-align: center;
		margin: 20rpx 0rpx;
	}
}
.cont_sty {
	font-size: 26rpx;
	color: #323233;
}
</style>
